import { SVG } from '@svgdotjs/svg.js'
import { Platform } from 'leafer-ui'
import { edgeConfig } from '../config/edgeConfig'
import { uiItems } from '../uiItems'

/**
 * 创建上升沿和下降沿背景图
 */
export function initEdge() {
    const color = 'blue'

    const { low, high, rise, neg, height } = edgeConfig.size
    const totalWidth = low + rise + high + neg

    const edgeSvg = SVG().size(totalWidth, height)

    // 画出一个竖着的虚线
    edgeSvg
        .path(
            `
        M 0 0
        l 0 ${height}
        `
        )
        .stroke({ color: '#111', width: 1, dasharray: '2 2' })
        .fill('none')

    // 画出一个低电平-上升沿-高电平-下降沿的图形
    edgeSvg
        .path(
            `
    M 0 ${height}
    l ${low} 0
    c ${rise / 2} 0 ${rise / 2} -${height} ${rise} -${height}
    l ${high} 0
    c ${neg / 2} 0 ${neg / 2} ${height} ${neg} ${height}
    `
        )
        .stroke({ color, width: 1 })
        .fill('none')

    const uiItem = uiItems['clkBg']
    if (uiItem) {
        uiItem.fill = {
            type: 'image',
            url: Platform.toURL(edgeSvg.svg(), 'svg'),
            mode: 'repeat',
            repeat: 'x',
            offset: {
                x: 0,
                y: 0,
            }
        }
    }
    return

    /* 样式 */
    // 创建一个style标签，将dataURL写入
    // let style = document.getElementById('edge-style')
    // if (!style) {
    //     style = document.createElement('style')
    //     style.id = 'edge-style'
    //     // 将style标签添加到head中
    //     document.head.appendChild(style)
    // }
    // style.innerHTML = `
    //    .graphic .main {
    //           background-image: url(${getDataURL(edgeSvg)});
    //           background-repeat: repeat-x;
    //    }
    // `
}
